<template>
	<div class="content">
		<!-- <van-row type="flex" justify="space-around"> -->
		<loca v-show='false' ref='local'></loca>
		<van-sticky >
			<van-row class="search-top" ref='search' type="flex" align="center" justify="center">
				<van-col span="1" offset="1" >
					<van-icon color="white" size="24px" name="location-o"></van-icon>
				</van-col>
				<van-col span="3" @click='$router.push({path:"/location"})' offset="1" >
					{{getLocation}}
				</van-col>
				<van-col span="16">
					<van-search v-model="searchValue" @search='search' shape="round" background="pink" placeholder="999朵玫瑰" />
				</van-col>
				
				<van-col span="2">
					<van-icon size="24px" color="white" dot name="chat-o"></van-icon>
				</van-col>
			</van-row>
		</van-sticky>
		<van-swipe :autoplay="3000">
			<van-swipe-item v-for="(image, index) in images" :key="index">
				<img :src="image" />
			</van-swipe-item>
		</van-swipe>

		<van-grid :border="false" :column-num="3">
			<van-grid-item v-for="(item,index) in cateList" @click='toCateList(index)' :icon="item.pic" :text="item.name" :key="index">
			</van-grid-item>
		</van-grid>
		<van-sticky >
			<van-tabs title-active-color="skyblue" background="pink" @change='changeNav' color="skyblue" swipe-threshold="5" v-model="active">
				<van-tab title="全部" />
				<van-tab title="爱情" />
				<van-tab title="求婚" />
				<van-tab title="生日" />
				<van-tab title="道歉" />
			</van-tabs>
		</van-sticky>

		<goods-list :list="productlist"></goods-list>
		<div class="zero-wrap"/>

		
	</div>
</template>

<script>
	import {mapGetters} from "vuex"

	import GoodsList from "../components/goods-list.vue"
	import loca from './location.vue';
	export default {
		name: 'Home',
		components: {
			
			GoodsList,loca
		},
		data() {
			return {
				cateList:[],
				value: '',
				searchValue:'',
				location:'泉州',
				active: 0,
				stickyHeight: '54',
				images: [
					
				],
				
				productlist: []
			}
		},
		computed:{
			...mapGetters(['getLocation']),
		},
		created() {
			// let w = this.$refs.search.clientHeight;			
			// this.stickyHeight=`${w}`;
			this.getBanner();
			this.getCateList();
			
			this.productlist = this.$request.shopData[0];
		},
		mounted() {
		
		},
		methods:{
			toCateList(index){
				this.$router.push({path:'/shopRecommend',query:{id:index}})
			},
			changeNav(name){
				this.productlist = this.$request.shopData[name];
			},
			search(){
				this.$router.push({path:'/search',query:{key:this.searchValue}});
			},
			getBanner(){
				
					this.images = this.$request.bannerList;
				
			},
			getCateList(){
				
					this.cateList =  this.$request.categoryList;
					console.log(this.cateList)
			}
		}

	}
</script>

<style scoped="scoped">
	.content{
		background: #ccc;
	}
	.search-top {
		background: pink;
	}
	img {
		width: 100%;
		height: 150px;
	}
	.zero-wrap{
		height: 50px;
	}
</style>
